<template>
  <div id="app">
    <div class="wrapper colorful">
      <router-link to="/">
        <a>动态表单</a>
      </router-link>
      |
      <router-link to="/dynamicTable">
        <a>动态表格</a>
      </router-link>
      |
      <router-link to="/cssSkill">
        <a>CSS奇技淫巧</a>
      </router-link>
      |
      <router-link to="/cityLink">
        <a>省市区联动</a>
      </router-link>
      |
      <router-link to="/dialogCom">
        <a>弹框关闭前确认</a>
      </router-link>
      |
      <router-link to="/arrayReduce">
        <a>树形数据</a>
      </router-link>
      |
      <router-link to="/selectTree">
        <a>树形下拉框</a>
      </router-link>
      |
      <router-link to="/html2Canvas">
        <a>Html2Canvas</a>
      </router-link>
      |
      <router-link to="/layout">
        <a>动态组件</a>
      </router-link>
      |
      <router-link to="/sendReplay">
        <a>M端回复框</a>
      </router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 60px 20px;
  .wrapper {
    margin: 20px auto;
    text-align: center;
    font-size: 20px;
    &.colorful {
      -webkit-mask-image: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        cyan,
        blue,
        purple
      );
      mask-image: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        cyan,
        blue,
        purple
      );
      background-image: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        yellow,
        orange,
        red,
        orange,
        yellow,
        green,
        yellow,
        orange,
        red
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-background-size: 200% 100%;
      background-size: 200% 100%;
      animation: bgp 5s infinite linear;
    }
  }
}
@keyframes bgp {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}
</style>
